<script setup lang="ts">
import NavBar from '@/components/NavBar/index.vue'
import { ref } from 'vue'
import StudentTabBar from '../components/StudentTabBar.vue'

const userInfo = ref({
  id: '73462662732',
  name: '张继科',
  avatar: '/static/default-avatar.png',
  level: 3,
  points: 300,
  coins: 30,
})

const menuList = [
  { icon: 'mic', title: '课程进度', path: '/pages/course/progress' },
  { icon: 'star', title: '每日成就', path: '/pages/achievement/daily' },
  { icon: 'calendar', title: '学习记录', path: '/pages/study/record' },
  { icon: 'file-text', title: '词汇量测评报告', path: '/pages/vocabulary/report' },
  { icon: 'setting', title: '设置', path: '/pages/settings/index' },
]

function handleMenuClick(path: string) {
  uni.navigateTo({ url: path })
}

function handleLeftClick() {
  uni.navigateBack()
}
</script>

<template>
  <view class="user-page">
    <NavBar title="学员" @left-click="handleLeftClick" />

    <view class="header">
      <view class="user-card">
        <view class="avatar-section">
          <view class="avatar-wrapper">
            <image :src="userInfo.avatar" mode="aspectFill" class="avatar" />
            <view class="level-badge">
              Lv.{{ userInfo.level }}
            </view>
          </view>
          <text class="user-id">
            ID: {{ userInfo.id }}
          </text>
        </view>
        <view class="user-stats">
          <view class="stat-item">
            <text class="stat-value">
              {{ userInfo.points }}
            </text>
            <text class="stat-label">
              学分
            </text>
          </view>
          <view class="divider" />
          <view class="stat-item">
            <text class="stat-value">
              {{ userInfo.coins }}
            </text>
            <text class="stat-label">
              金币
            </text>
          </view>
        </view>
      </view>
    </view>

    <view class="menu-section">
      <view
        v-for="item in menuList"
        :key="item.title"
        class="menu-item"
        @click="handleMenuClick(item.path)"
      >
        <view class="menu-content">
          <view class="left">
            <uv-icon :name="item.icon" size="40" color="#666" />
            <text class="menu-title">
              {{ item.title }}
            </text>
          </view>
          <uv-icon name="arrow-right" size="30" color="#999" />
        </view>
      </view>
    </view>

    <StudentTabBar :value="1" />
  </view>
</template>

<style lang="scss" scoped>
.user-page {
  min-height: 100vh;
  background-color: #f8f9fc;
  padding-bottom: 100rpx;

  .header {
    padding: 30rpx;

    .user-card {
      background: linear-gradient(135deg, #2979ff, #5e96ff);
      border-radius: 24rpx;
      padding: 40rpx 30rpx;
      color: #ffffff;
      box-shadow: 0 8rpx 20rpx rgba(41, 121, 255, 0.2);

      .avatar-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 40rpx;

        .avatar-wrapper {
          position: relative;
          margin-bottom: 20rpx;

          .avatar {
            width: 120rpx;
            height: 120rpx;
            border-radius: 60rpx;
            border: 4rpx solid rgba(255, 255, 255, 0.8);
          }

          .level-badge {
            position: absolute;
            bottom: -6rpx;
            left: 50%;
            transform: translateX(-50%);
            background: #ff9500;
            color: #ffffff;
            font-size: 20rpx;
            padding: 4rpx 16rpx;
            border-radius: 12rpx;
            border: 2rpx solid #ffffff;
          }
        }

        .user-id {
          font-size: 24rpx;
          color: rgba(255, 255, 255, 0.8);
        }
      }

      .user-stats {
        display: flex;
        justify-content: center;
        align-items: center;

        .stat-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          flex: 1;

          .stat-value {
            font-size: 40rpx;
            font-weight: 600;
            margin-bottom: 8rpx;
          }

          .stat-label {
            font-size: 24rpx;
            color: rgba(255, 255, 255, 0.8);
          }
        }

        .divider {
          width: 2rpx;
          height: 50rpx;
          background: rgba(255, 255, 255, 0.2);
          margin: 0 40rpx;
        }
      }
    }
  }

  .menu-section {
    margin: 30rpx;
    background: #ffffff;
    border-radius: 24rpx;
    padding: 10rpx 0;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);

    .menu-item {
      padding: 30rpx;

      &:active {
        background-color: #f5f7ff;
      }

      .menu-content {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
          display: flex;
          align-items: center;
          gap: 20rpx;

          .menu-title {
            font-size: 30rpx;
            color: #333;
          }
        }
      }

      &:not(:last-child) {
        border-bottom: 2rpx solid #f5f5f5;
      }
    }
  }
}
</style>
